<template>
  <div>
    <NavBar :showLeft="false" title="东方神韵线上展厅" @click-right-search="showSearch"></NavBar>
    <div class="home">
<!--      <div class="home__search">-->
<!--        <van-tag style="margin-right: 10px" v-for="(item,index) in info.checkList" type="primary" @close="remove(index)" closeable plain>-->
<!--          {{item.name}}-->
<!--        </van-tag>-->
<!--      </div>-->
      <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
      >
        <div class="home__list">
          <Item :initNum="getAllBus" :init="init" :info="item" v-for="item in list" :key="item.id"/>
        </div>
      </van-list>
    </div>
    <van-action-sheet v-model:show="show">
      <ShowSearch :search="search"/>
    </van-action-sheet>
    <div class="bus" @click="navToBus">
      <img class="bus-1" src="@/assets/list/bus.png" alt="">
      <span>{{allNum}}</span>
    </div>
  </div>
</template>

<script setup>
import {storeToRefs} from "pinia";
import {useCounterStore} from '@/store/index'
import {ref, onMounted, onUnmounted, computed} from 'vue'
import Item from "./components/Item/index.vue"
import NavBar from "@/components/NavBar/index.vue"
import ShowSearch from "./components/ShowSearch/index.vue";
import {getCart, getOrderList, getProductList, love_list} from "../../api/index.js";
import moment from "moment";
import {useRouter} from "vue-router";

const list = ref([])
const info = useCounterStore();
const router=useRouter()
const finished = ref(false);
const loading = ref(false);
const pageInfo = ref({
  page: 1
})
const show = ref(false)
const allNum=ref(0)
const clickLeft = () => {
  console.log(123)
}
const getAllBus=()=>{
  getCart().then(res=>{
    console.log(res)
    allNum.value=res.data.length
  })
}
onMounted(()=>{
  getAllBus()
})
const onLoad = async () => {
  loading.value = true
  try {
    const res = await love_list({
      product_category: info.info.product_category?.filter(ele => ele.check).map(ele => ele.value).join(','),
      product_material: info.info?.product_material?.filter(ele => ele.check).map(ele => ele.value).join(','),
      product_purity: info.info?.product_purity?.filter(ele => ele.check).map(ele => ele.value).join(','),
      product_technology: info.info.product_technology?.filter(ele => ele.check).map(ele => ele.value).join(','),
      product_set: info.info.product_set?.filter(ele => ele.check).map(ele => ele.value).join(','),
      page: pageInfo.value.page
    })
    const arr = res.data.data.map(ele => ({...ele, createtime: moment(ele.createtime * 1000).format("YYYY-MM-DD")}))
    if (pageInfo.value.page == 1) {
      list.value = arr
    } else {
      list.value = [...list.value, ...arr]
    }
    pageInfo.value.page++
    if (res.data.last_page >= res.data.current_page) {
      finished.value = true;
    }
    loading.value = false

  }catch {
    finished.value = true;
    loading.value = false
  }


}
const init=()=>{
  pageInfo.value.page=1;
  onLoad()
}
const showSearch = () => {
  show.value = true
}
const search = () => {
  show.value=false;
  pageInfo.value.page = 1
  onLoad();
}
const navToBus=()=>{
  router.push("/Bus")
}
const remove=(index)=>{
  info.remove(index)
  search()
}
</script>

<style lang="less" scoped>
.home {
  padding: 0px 18px;

  &__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

}
.bus-1{
  width: 24px;
}
.bus{
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #498FF6;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 27px;
  right: 0;
  top: 50px;
  background: #FFFFFF;
  box-shadow: 0px 1px 12px 0px rgba(0,0,0,0.08);
  border-top-left-radius: 13px;
  border-bottom-left-radius: 13px;
}
</style>